layui.use(['table', 'jquery', 'form', 'admin'], function () {
    let $ = layui.jquery;
    let E = window.wangEditor
    let editor = new E('#editor')
// 或者 var editor = new E( document.getElementById('editor') )
    editor.create()

    $('.avatar').attr('src', localStorage.getItem('photo'))
    $('.author').html(localStorage.getItem('name'))
    $.ajax({
        type: "GET",
        url: '/api/article/getOneArticle',
        dataType: 'json',
        data: {
            id: getUrlParam("id")
        },
        success: function (data) {
            if (data.status === 200) {
                console.log(data.data)
                let content = data.data.content
                let text = data.data.title + "                        <p id=\"date\" style=\"height: 100%;padding: 0; margin-top: 10px;font-size: 10px;\">\n" +
                    "                        </p>"
                $('#title').html(text)
                text = ' 发布于  ' + data.data.date + '  阅读  ' + data.data.view + '  评论   ' + data.data.count + ' '
                $('#date').text(text)
                $("#content").html('<textarea id="appendTest" style="display:none;"></textarea>');
                $("#appendTest").val(content);
                editormd.markdownToHTML("content", {
                    htmlDecode: "style,script,iframe", //可以过滤标签解码
                    emoji: true,
                    taskList: true,
                    tex: true,               // 默认不解析
                    flowChart: true,         // 默认不解析
                    sequenceDiagram: true,  // 默认不解析
                });
                let comment = ""

                for (let i = 0; i < data.data.comment.length; ++i) {
                    let text =
                        '                        <div v-for="(item,index) in discuss">\n' +
                        '                            <div style="display: inline-block; margin-bottom: 20px;">\n' +
                        '                                <input type="text" value="' + data.data.comment[i].id + '" style="display: none">' +
                        '                                <img src="' + data.data.comment[i].photo + '" alt="图片走失了" style="display: inline-block;padding-top: 15%;width: 30px;height: 34.5p' +
                        '">\n' +
                        '                                <p style="display: inline-block;text-align: center;position: absolute;margin-top: 1%;padding-left: 20px;">\n' +
                        '                                    ' + data.data.comment[i].user + '</p>\n' +
                        '                                <p style="display: inline-block;text-align: center;position: absolute;margin-top: 1%;padding-left: 120px;">\n' +
                        '                                    ' + data.data.comment[i].date + '</p>\n' +
                        '                                <p style="display: inline-block;text-align: center;position: absolute;margin-top: 1%;padding-left: 220px;">\n' +
                        '                                    ' + data.data.comment[i].content + '</p>\n' +
                        '                                <button class=\'delete\'\n' +
                        '                                        style="display: inline-block;text-align: center;position: absolute;margin-top: 1%;margin-left: 630px;background-color: rgb(0,0,0,0);border:none"\n' +
                        '                                        >\n' +
                        '                                    删除\n' +
                        '                                </button>\n' +
                        '                            </div>\n' +
                        '                        </div>'
                    comment += text
                }
                $('#discussAera').html(comment)
            } else {
                layer.msg(data.msg)
            }
        },
        err: function () {
            layui.use('layer', function () {
                layer.msg("服务器请求失败")
            });
        }
    });

    $('#discussBtn').click(function () {
        if (localStorage.getItem('Authorization')) {
            if (editor.txt.text().length < 2) {
                layer.msg('评论过短', function () {
                    return;
                });
            } else {
                $.ajax({
                    type: "POST",
                    url: '/api/comment/create',
                    dataType: 'json',
                    data: {
                        user: localStorage.getItem('id'),
                        article: getUrlParam('id'),
                        content: editor.txt.text()
                    },
                    success: function (data) {
                        if (data.status === 200) {
                            layer.msg('评论成功')
                            setTimeout(function () {
                                window.location.reload()
                            }, 1000);
                        } else {
                            layer.msg(data.msg)
                        }
                    },
                    err: function () {
                        layui.use('layer', function () {
                            layer.msg("服务器请求失败")
                        });
                    }
                });
            }
        } else {
            layer.alert('请先登录', {
                skin: 'layui-layer-molv' //样式类名  自定义样式
                , closeBtn: 0    // 是否显示关闭按钮
                , anim: 1 //动画类型
                , btn: ['返回主页'] //按钮
                , icon: 6    // icon
                , yes: function () {
                    location.href = '/'
                }
            });
        }
    })

    $(document).on('click', '.delete', function () {
        if (localStorage.getItem('Authorization')) {

            let id = $(this).prev().prev().prev().prev().prev().val()
            layer.alert('确定删除？', {
                skin: 'layui-layer-molv' //样式类名  自定义样式
                , closeBtn: 1    // 是否显示关闭按钮
                , anim: 1 //动画类型
                , btn: ['确定', '取消'] //按钮
                , icon: 6    // icon
                , yes: function () {
                    $.ajax({
                        type: "POST",
                        url: '/api/comment/delete',
                        dataType: 'json',
                        headers: {
                            'Authorization': localStorage.getItem('Authorization')
                        },
                        data: {
                            id: id
                        },
                        success: function (data) {
                            if (data.status === 200) {
                                layer.msg('删除成功')
                                setTimeout(function () {
                                    window.location.reload()
                                }, 1000);
                            } else {
                                layer.msg(data.msg)
                            }
                        },
                        err: function () {
                            layui.use('layer', function () {
                                layer.msg("服务器请求失败")
                            });
                        }
                    });
                }
            });
        } else {
            layer.alert('请先登录', {
                skin: 'layui-layer-molv' //样式类名  自定义样式
                , closeBtn: 0    // 是否显示关闭按钮
                , anim: 1 //动画类型
                , btn: ['返回主页'] //按钮
                , icon: 6    // icon
                , yes: function () {
                    location.href = '/'
                }
            });
        }
    })
});

function getUrlParam(name) {
    let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
    let r = window.location.search.substr(1).match(reg);  //匹配目标参数
    if (r != null) return unescape(r[2]);
    return null; //返回参数值
}